window.addEventListener('load',function(){
    var focus=document.querySelector('.focus')
    var ul=focus.children[0]
    var ol=focus.children[1]
    var w=focus.offsetWidth
    // 手指初次触摸坐标,拖动距离
    var x=0,touchM=0
    // 判断用户是否拖动
    var flag=false
    var index=0


    // 动态创建圆点
    for(var i=0;i<ul.children.length;i++){
        var li=document.createElement('li')
        ol.append(li)
    }
    ol.children[0].className='current'
    // 克隆第一张和第三张图片
    var imgC1=ul.children[0].cloneNode(true)
    var imgC3=ul.children[ul.children.length-1].cloneNode(true)
    ul.append(imgC1)
    ul.insertBefore(imgC3,ul.children[0])
    // 自动播放
    var interval=setInterval(function(){
        index++
        var moveX=-index*w
        ul.style.transition='all .5s'
        ul.style.transform='translateX('+moveX+'px)'
    },2000)
    // 需要注意的是要等待过渡动画做完了才做判断
    // 监听过渡动画是否完成
    ul.addEventListener('transitionend',function(){
        // 无缝滚动
        if(index>=ul.children.length-2){
            index=0
            ul.style.transition='none'
            // 根据当前获取的索引值，重新获得translate数值
            moveX=-w*index
            ul.style.transform='translateX('+moveX+'px)'
        }else if(index<0){
            index=ul.children.length-3
            ul.style.transition='none'
            moveX=-w*index
            ul.style.transform='translateX('+moveX+'px)'
        }
        //小圆点跟着图片变化
        // 把ol中所有li元素类名是current，类名清空
        ol.querySelector('.current').classList.remove('current')
        // 图片索引小圆点类名设置为current
        ol.children[index].classList.add('current')
    })

    // 手指触摸focus,轮播图停止播放，手指离开轮播图继续播放
    // 手指拖动图片
    focus.addEventListener('touchstart',function(e){
        clearInterval(interval)
        x=e.targetTouches[0].pageX
    })
    focus.addEventListener('touchmove',function(e){
        touchM=e.targetTouches[0].pageX-x
        var translateX=-index*w+touchM
        ul.style.transition='none'
        ul.style.transform='translateX('+translateX+'px)'
        flag=true
    })
    focus.addEventListener('touchend',function(){
        if(flag){
            // 如果拖动距离大于50px播放下一张，否则回弹
            // 播放
            if(Math.abs(touchM)>50){
                //右滑，上一张
                if(touchM>0){
                    index--
                }else{
                    // 左滑，下一张
                    index++
                }
                var moveX=-index*w
                ul.style.transition='all .5s'
                ul.style.transform='translateX('+moveX+'px)'
            }else{
                // 回弹 index不需变化
                var moveX=-index*w
                ul.style.transition='all .5s'
                ul.style.transform='translateX('+moveX+'px)'
            }
        }
        // 手指离开开启定时器
        // 开启之前保证只有一个定时器
        clearInterval(interval)
        interval=setInterval(function(){
            index++
            var moveX=-index*w
            ul.style.transition='all .5s'
            ul.style.transform='translateX('+moveX+'px)'
        },2000)
    })
})